<template>
	<view>
		<!-- <view class="user">
            <view>{{ user.userName }}</view>
        </view> -->
		<j-cell-group>
			<j-cell :title="$t('General.family.nicknameInHome')" :tips="user.userName" :more="user.isCurrentUser || group.isCreator"
				@jftap="user.isCurrentUser || group.isCreator?onBindtapGroupName():''"></j-cell>
			<j-cell :title="$t('General.family.homePermission')" :tips="user.isCreator?$t('General.family.homeCreator'):user.isAdmin?$t('General.family.manager'):''" :more="false"></j-cell>
		</j-cell-group>
		<!-- <j-cell-group title="基本信息">
            <j-cell title="是否管理员" :more="false">
                <view slot="tips">
                    <switch :checked="user.isAdmin" :disabled="user.isAdmin" />
                </view>
            </j-cell>
        </j-cell-group> -->
		<uni-popup ref="popup" @maskClick="maskClick" class="popupName">
			<form @submit="submit">
				<view class="form">
					<view class="form-item">
						<input :placeholder="$t('General.mine.changeNickname')" v-model="name" class="form-control" @confirm="submit" />
					</view>
					<view class="form-item">
						<button class="block radius-btn" type="primary" form-type="submit">{{ $t('General.family.ok') }}</button>
					</view>
				</view>
			</form>
		</uni-popup>
	</view>
</template>

<script>
	import {isEmojiCharacter} from "@/utils/util";

    export default {
		data() {
			return {
				user: {
					userName: 'ddd',
					isAdmin: ''
				},
				name: '',
				group: {}
			};
		},
		onLoad: function(options) {
			console.log('=== member-info:onLoad:', JSON.parse(options.user), JSON.parse(options.group));
			this.user = JSON.parse(options.user)
			this.group = JSON.parse(options.group)
			this.name = this.user.userName
		},
		onShow: function() {
			console.log('=== member-info:onShow:');
			this.getUserListByPage();
            uni.setNavigationBarTitle({
                title: this.$t('General.home.memberMsg')
            })
		},
		methods: {
			editName(e) {
				// uesr.isCreator true // 家庭创建者
				// group.isCreator true // 房间创建者
				// user.isCurrentUser true //房间是否是我自己
			},
			// 查询成员信息
			// // 编辑管理员
			// switchChange(ev){
			//     let value = ev.detail.value
			//     const data = {
			//         id:this.user.id,
			//         isAdmin:value
			//     }
			//     getApp().globalData.api.updateUser(data,result => {
			//         console.log(result);
			//     })
			// }
			// 修改家庭名称
			onBindtapGroupName(ev) {
				this.$refs.popup.open()
			},
			// 表单提交
			submit(ev) {
				console.log('update:submit:', ev);
				if (this.name.replace(/\s/g, '') === '') {
					uni.showToast({
						title: this.$t('General.mine.nicknamePla'),
						icon: 'none'
					});
					return;
				}
                if(this.name.length == 2 && isEmojiCharacter(this.name)) {
                    uni.showToast({
                        title: this.$t('General.family.msg2'),
                        icon:'none'
                    });
                    return;
                }
                if(this.name.length<2 || this.name.length>50 ){
                    uni.showToast({
                        title: this.$t('General.family.msg2'),
                        icon:'none'
                    });
                    return;
                }

				let data = {
					userGroupId: this.user.userGroupId,
					userName: this.name,
					userId: this.user.id
				};
				getApp().globalData.api.updateUser(data, (result) => {
					this.$refs.popup.close()
					this.getUserListByPage();
				});
			},
			maskClick(ev) {
				console.log('maskClick', ev);
			},
			//获取用户信息
			getUserListByPage() {
				const data = {
					userGroupId: this.group.id,
					userId: this.user.id,
					page: 1,
					limit: 999
				};
				getApp().globalData.api.getUserListByPage(data, (result) => {
					console.log('查询用户详情：', result);
					this.user = result.data[0]
				});
			}
		}
	};
</script>
<style lang="scss">

.popupName {
    /deep/ .uni-popup__wrapper {
        top: -100rpx;
    }
}
	.user {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.form {
		background: white;
		padding: 60rpx;
		border-radius: 10rpx;
	}

	.form .form-item {
		margin-top: 20rpx;
	}

	.form .form-title {
		text-align: center;
		margin-bottom: 40rpx;
		font-weight: bold;
	}

	.form .form-item .form-control {
		background: #efefef;
	}
</style>
